<template>
  <div class="app-container">
    <!-- 搜索部分 -->
    <div>
      <el-form :model="search" inline>
        <!-- <el-form-item label="年">
          <el-input v-model="search.year" placeholder="输入年份"></el-input>
        </el-form-item> -->
        <el-form-item label="周">
          <el-input v-model="search.week" placeholder="输入周"></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-input v-model="search.date" placeholder="输入日期"></el-input>
        </el-form-item>
        <el-form-item label="上线时间">
          <el-input v-model="search.time" placeholder="输入时间"></el-input>
        </el-form-item>
        <el-form-item label="班组">
          <el-input v-model="search.teams" placeholder="输入班组"></el-input>
        </el-form-item>
        <el-form-item label="工单">
          <el-input v-model="search.workorder" placeholder="输入工单"></el-input>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
      </el-form>
    </div>
    <h3>油漆车间生产序列计划（第13周）</h3>
    <!-- 按钮排 -->
    <!-- 周一至周日 -->
    <div>
      <el-row type="flex" justify="space-between">
        <el-col :span="12">
          <el-row :gutter="2">
            <el-col :span="6">
              <el-button type="primary" size="small" @click="addItem">批量导入生产计划</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="danger" size="small" @click="addItem">紧急插工单</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="warning" size="small" @click="updataItem(true)">修改</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="warning" size="small" @click="deleteItem(true)">删除</el-button>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="12">
          <el-button-group style="float: right">
            <el-button type="primary" size="big">全部</el-button>
            <el-button type="info" size="big">周一</el-button>
            <el-button type="info" size="big">周二</el-button>
            <el-button type="info" size="big">周三</el-button>
            <el-button type="info" size="big">周四</el-button>
            <el-button type="info" size="big">周五</el-button>
            <el-button type="info" size="big">周六</el-button>
            <el-button type="info" size="big">周日</el-button>
          </el-button-group>
        </el-col>
      </el-row>
    </div>

    <!-- 表格 -->
    <vxe-table
      border
      :column-config="{ useKey: true }"
      :row-config="{ useKey: true }"
      height="400"
      :data="tableData"
      :cell-class-name="cellClassName"
    >
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column field="Date" title="日期"></vxe-column>
      <vxe-column field="shift" title="班别"></vxe-column>
      <vxe-column field="team" title="班组"></vxe-column>
      <vxe-column field="round" title="圈数"></vxe-column>
      <vxe-column field="online_time" title="上线时间"></vxe-column>
      <vxe-column field="work_order" title="工单" :formatter="formatworkOrder" type="html" width="90"></vxe-column>
      <vxe-column field="vehicle_NO" title="小车号"></vxe-column>
      <vxe-column field="part_SN" title="简码"></vxe-column>
      <vxe-column field="part_NO" title="零件号" width="100" :formatter="formatPartNo" type="html"></vxe-column>
      <vxe-column field="part_name" title="零件名称" width="120" :formatter="formatPartName" type="html"> </vxe-column>
      <vxe-column field="paintCode" title="颜色代号"></vxe-column>
      <vxe-column field="ProgramCode" title="程序号"></vxe-column>
      <vxe-column field="QuantityPerRack" title="每车件数"></vxe-column>
      <vxe-column field="RackQuantity" title="小车数量"></vxe-column>
      <vxe-column field="ShareRack" title="共用小车"></vxe-column>
      <vxe-column field="ProductionQuantity" title="生产数量"></vxe-column>
      <vxe-column field="Remark" title="备注"></vxe-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  name: 'workorder',

  data() {
    return {
      search: {
        date: '',
        time: '',
        teams: '',
        workOrder: '',
      },
      tableData: [
        {
          Date: '2016/3/22',
          shift: '夜班',
          team: 'A',
          round: '08',
          online_time: '03/23 00:09:45',
          work_order: 'W0234',
          vehicle_NO: '059-063',
          part_SN: '177',
          part_NO: '300504103',
          part_name: 'SGM201左外镜副镜壳银河灰',
          paintCode: '1551',
          ProgramCode: '0041',
          QuantityPerRack: '20',
          RackQuantity: '6',
          ShareRack: '85',
          ProductionQuantity: '85',
          Remark: '-',
        },
        {
          Date: '2016/3/22',
          shift: '白班',
          team: 'A',
          round: '08',
          online_time: '03/23 00:09:45',
          work_order: 'W0234',
          vehicle_NO: '059-063',
          part_SN: '177',
          part_NO: '300504103',
          part_name: 'SGM201左外镜副镜壳银河灰',
          paintCode: '1551',
          ProgramCode: '0041',
          QuantityPerRack: '20',
          RackQuantity: '6',
          ShareRack: '85',
          ProductionQuantity: '85',
          Remark: '-',
        },
        {
          Date: '2016/3/22',
          shift: '夜班',
          team: 'A',
          round: '08',
          online_time: '03/23 00:09:45',
          work_order: 'W0234',
          vehicle_NO: '059-063',
          part_SN: '177',
          part_NO: '300504103',
          part_name: 'SGM201左外镜副镜壳银河灰',
          paintCode: '1551',
          ProgramCode: '0041',
          QuantityPerRack: '20',
          RackQuantity: '6',
          ShareRack: '85',
          ProductionQuantity: '85',
          Remark: '-',
        },
        {
          Date: '2016/3/22',
          shift: '白班',
          team: 'A',
          round: '08',
          online_time: '03/23 00:09:45',
          work_order: 'W0234',
          vehicle_NO: '059-063',
          part_SN: '177',
          part_NO: '300504103',
          part_name: 'SGM201左外镜副镜壳银河灰',
          paintCode: '1551',
          ProgramCode: '0041',
          QuantityPerRack: '20',
          RackQuantity: '6',
          ShareRack: '85',
          ProductionQuantity: '85',
          Remark: '-',
        },
        {
          Date: '2016/3/22',
          shift: '白班',
          team: 'A',
          round: '08',
          online_time: '03/23 00:09:45',
          work_order: 'W0234',
          vehicle_NO: '059-063',
          part_SN: '177',
          part_NO: '300504103',
          part_name: 'SGM201左外镜副镜壳银河灰',
          paintCode: '1551',
          ProgramCode: '0041',
          QuantityPerRack: '20',
          RackQuantity: '6',
          ShareRack: '85',
          ProductionQuantity: '85',
          Remark: '-',
        },
      ],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {},
    addItem() {},
    updataItem() {},
    deleteItem() {},

    formatworkOrder({ cellValue }) {
      return `<span style="color:blue;font-weight: bold">  ${cellValue}   </span>`
    },
    formatPartNo({ cellValue }) {
      return `<span style="color:green;font-weight: bold">  ${cellValue}   </span>`
    },
    formatPartName({ cellValue }) {
      return `<span style="color:green;font-weight: bold">  ${cellValue}   </span>`
    },
    cellClassName({ row, column }) {
      if (column.field === 'team') {
        if (row.team == '夜班') {
          return 'col-black'
        }
      }
      return null
    },
  },
}
</script>

<style lang="scss" scoped>
h3 {
  text-align: center;
}
::v-deep .el-button-group {
  margin-left: 10px;
}
</style>
